<template>
    <div class="info-container">
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
            <div class="ball" v-show="ballFag" ref="ball"></div>
        </transition>
        
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotulist='Lunbotulist' style="height:auto;width:auto;"></swiper>
                </div>
            </div> 
        </div>
        <div class="mui-card">
			<div class="mui-card-header">{{ goodsinfo.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
                        市场价:<del>￥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;&nbsp;销售价:<span class="now_price">￥{{ goodsinfo.sell_price }} </span>
                    </p> 
                    <p>购买数量:<numberbox @getcount="getSelectedCount" :max="goodsinfo.quantity"></numberbox></p>
                    <p>
                        <mt-button type='primary' size='small'>立即购买</mt-button>
                        <mt-button type='danger' size='small' @click="addtoshopcar">加入购物车</mt-button>
                    </p>
				</div>
			</div>
		</div>
        <div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品编号:{{ goodsinfo.id }}</p>
                    <p>库存情况:{{ goodsinfo.quantity }}件</p>
                    <p>上架时间:{{ goodsinfo.add_time }}</p>
				</div>
			</div>
			<div class="mui-card-footer">
                <mt-button type='primary' size='large' plain>图文介绍</mt-button>
                <mt-button type='danger' size='large' plain>商品评论</mt-button>
            </div>
		</div>
    </div>			
</template>

<script>
import swiper from '../subcomponents/swiper.vue'
import numberbox from '../subcomponents/goodsinfo_numberbox.vue'
import { Toast } from 'mint-ui'

export default {
    data(){
        return{
            id: this.$route.params.id,
            Lunbotulist:[
                // {img:require('../../images/goodsinfo1.jpg')},
                // {img:require('../../images/goodsinfo2.jpg')},
                // {img:require('../../images/goodsinfo3.jpg')}
            ],
            goodsinfo:{
                // add_time:"2018-05-05 20:01:09 19:30",
                // goods_id:"商品货号:SD59916161699",
                // id:89,
                // market_price:2699,
                // sell_price:2199,
                // quantity:60,
                // title:'【限时抢券立减】Apple/苹果 iPhone X 64G 全网通4G智能手机 苹果X 苹果10 iPhone10】'
            },
            ballFag: false , //控制小球隐藏和显示
            selectedCount:1
        }
    },
    created(){
        // this.getlunbotu();
        this.getgoodsinfo();
    },
    methods: {
        // getlunbotu(){
        //     this.$http.get("" + this.id).then(result =>{
        //         if(result.body.status === 0 ){
        //             this.Lunbotulist = result.body.massage;
        //         }else{
        //             Toast('轮播图加载失败');
        //         }
        //     });
        // },
        getgoodsinfo(){
            this.$http.get("https://www.easy-mock.com/mock/5cf86de19b40a0058b942993/vue-001/goodsinfo/" + this.id).then(result =>{
                if(result.status === 200 ){
                    let{Lunbotulist,goodsinfo} = result.body.data;
                    this.Lunbotulist = Lunbotulist;
                    this.goodsinfo = goodsinfo;
                }else{
                    Toast('轮播图加载失败');
                }
            });
        },
        addtoshopcar(){
            var car = localStorage.getItem('car')||[];
            // console.log(JSON.parse(car));
            if(car.length > 0 ){
                var id = this.id;
                var targetItem = [...car].filter(function(item,index){
                    return item.id == id
                });
                if((targetItem.length>0) && (this.selectedCount + targetItem[0].count > this.goodsinfo.quantity)){
                    Toast('购买个数超过库存数')
                    return
                }
            }
            Toast('添加成功');
            this.ballFag = !this.ballFag;
            //拼接出一个要保存到vuex中的购物对象
            var goodsinfo = { 
                id:this.id,
                content:this.goodsinfo.title,
                src:this.Lunbotulist[0].img,
                count: this.selectedCount,
                price:this.goodsinfo.sell_price,
                selected : true
            };

            this.$store.commit("addToCar",goodsinfo);
                    

        },
        beforeEnter(el) {
            el.style.transform = "translate(0,0)";
        },
        enter(el , done) {
            el.offsetWidth;
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            const badgePosition = document.getElementById("badge").getBoundingClientRect();
            const xDist = badgePosition.left-ballPosition.left;
            const yDist = badgePosition.top-ballPosition.top;
            
            el.style.transform = `translate(${xDist}px,${yDist}px)`;
            // el.style.transform ="translate(100px,100px)";
            el.style.transition = "all 0.7s cubic-bezier(.4,-0.3,1,.68)";
            done();
            
        },
        afterEnter(el) {
            this.ballFag = !this.ballFag;
        } ,
        getSelectedCount(count){
            this.selectedCount = count;
            //当子组件把选中的数量传过来了时候，就将数量保存到父组件身上
            // console.log(this.selectedCount);
        }
    },
    components:{
        swiper,
        numberbox
    }
}
</script>

<style lang="scss">
.info-container{
    background-color: #eee;
    overflow: hidden;

    .mint-swipe{
        height: 270px!important;
        text-align: center;
    }

    p{
        margin-bottom: 4px;
    }

    .now_price{
        font-size: 15px;
        color:red;
    }

    .mui-card-footer{
        display: block;

        button{
            margin:10px 0;
            height: 35px;
            font-size: 14px;
        }
    }

    .mui-card-content-inner{
        p{
            margin-bottom: 8px;
        }
    }

    .ball{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index:999;
        left: 147px;
        top: 491px;
    }
}
</style>

